<template>
<div>

        <navbar >  </navbar>
        
        <img src="../assets/userBg.jpg" alt="" class="userBg">
        
        <div class="user_one">
            <div class="left">
                <img :src="model.user_img" alt="" v-if="model.user_img">
                <img src="../assets/cover.jpg" alt="" v-else>
            </div>
            <div class="right">
                <div class="numInfo">
                    <div class="fensi_guanzhu">
                        <span>100</span>
                        <span style="font-size:3.2vw;color:#999;">粉丝</span>
                    </div>
                    <div class="fensi_guanzhu">
                        <span>100</span>
                        <span style="font-size:3.2vw;color:#999;">关注</span>
                    </div>
                    <div class="fensi_guanzhu">
                        <span>100</span>
                        <span style="font-size:3.2vw;color:#999;">获赞</span>
                    </div>
                    
                </div>
                <div class="editInfo" @click="$router.push('/edit')">
                    <van-button color="#fd7299"  block plain >编辑资料</van-button>
                </div>
            </div>
        </div>

        <div class="user_two">
            <div>
                <b>{{model.name}}</b> 
                
                <!-- 根据性别切换男女性别的图标 -->
                <b class="el-icon-male" v-if="this.model.gender==='男'"></b>
                <b class="el-icon-female" v-else></b>
                <!-- 等级 -->
                <b class="el-icon-s-opportunity" ></b>
                
            </div>
            <p v-if="model.user_desc" class="user_desc">{{model.user_desc}}</p>
            <p v-else>这个人很神秘，什么都没有写</p>
        </div>

        <van-tabs v-model="active" class="user_three">
            <van-tab title="动态">内容 1</van-tab>
            <van-tab title="视频">内容 2</van-tab>
        </van-tabs>

        <button @click="$router.push('/home')">去首页</button>
        
    

</div>
</template>

<script>

    import navbar from "../components/common/navbar.vue"
    

export default {
    data() {
        return {
           model:{},
           active:""
        };
    },

    methods: {
        async userinfoData(){//调用接口，获取用户信息

           /* const res = await this.$http.get("/user/" + localStorage.getItem('id'),{
               headers:{
                // [注意]   Bearer之后需要带一个空格才能生效
                   'Authorization':'Bearer ' + localStorage.getItem('token')
               }
           }) */
           const res = await this.$http.get("/user/" + localStorage.getItem('id'))
           
           localStorage.setItem("userData",res.data[0])
           this.model = res.data[0]
           
           
       }
    },

    components:{
        navbar
    },

    created(){
        this.userinfoData()
    }


    }
</script>


<style scoped>

    .userBg{
        height: 32vw;
        width: 100%;
    }

    .user_one{
        margin: 0;
        width:100%;
        height: 25.6vw;
        margin-top:-1.333vw;
        background-color: #fff;
        display: flex;
        overflow: hidden;
        padding-bottom: 2.667vw;
    }
    .user_one .left{
        width: 26.667vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        /* 改变主轴后，上下居中 */
        justify-content: center;
        align-items: center;
         
    }
    .user_one .left img{
        width: 18.667vw;
        height: 18.667vw;
        border-radius: 9.333vw;
    }


    /* 右边布局 */
    .user_one .right{
        flex: 1;
    }
    .user_one .right .numInfo{
        display: flex;
    }
    .user_one .right .numInfo div{
        flex: 1;
        display: flex;
        justify-content: center; 
        font-size: 4.8vw;
    }
    .user_one .right .numInfo div:nth-child(1){
        border-right:1px solid #e3e3e3;
    }
    .user_one .right .numInfo div:nth-child(2){
        border-right:1px solid #e3e3e3;
    }

    .fensi_guanzhu{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .editInfo{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .editInfo button{
        margin-top:2.133vw;
        width: 90%;
        /* height: 10.133vw; */
        border-radius: 1.333vw;
        font-size: 4.8vw;
    }



    .user_two{
        background-color: #fff;
        height: 20.667vw;
        overflow: hidden;
    }
    .user_two div{
        margin-left: 4vw;
    }
    .user_two p{
        margin-left: 4vw;
        color: gray;
        font-size: 4vw;
    }

    .user_two div b:nth-child(1){
        font-size: 5.067vw;
    }
    .user_two div b:nth-child(2){
        color:deepskyblue;
    }
    .user_two div b:nth-child(3){
        color:rgba(243, 146, 102, 0.767);
    }

    .user_desc{
        display: flex;
        word-break: break-all;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .user_three{
        margin-top:1px;
    }



   

</style>